import React from 'react'
import { LinkContainer, IndexLinkContainer } from 'react-router-bootstrap'
import { Navbar, Nav, NavItem } from 'react-bootstrap'

const NavBar = ({user, logout}) => {
  var adminNav = <div>
    <Nav>
      <LinkContainer to={'/orders'}>
        <NavItem eventKey={1} href="#">商城订单</NavItem>
      </LinkContainer>
      <LinkContainer to={'/product/create'}>
        <NavItem eventKey={1} href="#">新建商品</NavItem>
      </LinkContainer>
      </Nav>
  </div>
    
  var userNav = <Nav>
      <LinkContainer to={'/orders'}>
        <NavItem eventKey={1} href="#">我的订单</NavItem>
      </LinkContainer>
      <LinkContainer to={'/carts'}>
        <NavItem eventKey={1} href="#">购物车</NavItem>
      </LinkContainer>
      <LinkContainer to={'/user/center'}>
        <NavItem eventKey={1} href="#">个人中心</NavItem>
      </LinkContainer>
      </Nav> 

  var accountNav = user.isLogin? <Nav pullRight>
      <NavItem onClick={logout}>退出</NavItem>
      </Nav> : <Nav pullRight>
      <LinkContainer to={'/register'}>
        <NavItem eventKey={1} href="#">注册</NavItem>
      </LinkContainer>
      <LinkContainer to={'/login'}>
        <NavItem eventKey={1} href="#">登录</NavItem>
      </LinkContainer>
    </Nav>

  return(
    <Navbar>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="/">淘货商城</a>
      </Navbar.Brand>
    </Navbar.Header>
    <Nav>
      <IndexLinkContainer to={'/'}>
        <NavItem eventKey={1} href="#">首页</NavItem>
      </IndexLinkContainer>
    </Nav>
    {(user.isAdmin && user.isLogin) ? adminNav : '' }
    {(!user.isAdmin && user.isLogin) ? userNav : '' }
    {accountNav}
    
    </Navbar>
  )
}

export default NavBar